<template>
  <div class="hqBox">
    <van-swipe class="hqBox-box box1" vertical :show-indicators="false" :autoplay="autoTime">
      <van-swipe-item v-for="(i,index) in dataBannerLeft" :key="index">
        <div :class="['hqBox-box-p', {'p-qs-up':i.flag=='up'},{'p-qs-down':i.flag=='down'}]">
          <p class="p-name">{{i.title}}</p>
          <p class="p-price"><span class="p-price-s">{{i.number}}</span></p>
          <p class="p-qs"  v-if="i.flag=='normal'">
            <span>--</span>  <span>--</span>
          </p>
         <p class="p-qs"  v-else>
            <span>{{i.gain}}</span>  <span>{{i.per}}</span>
          </p>
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="hqBox-box box2" @click="bannerHref">
      <img src="../assets/img/hqzx.png" alt srcset />
    </div>
    <van-swipe class="hqBox-box box1" vertical :show-indicators="false" :autoplay="autoTime">
      <van-swipe-item v-for="(i,index) in dataBannerRight" :key="index">
        <div :class="['hqBox-box-p', {'p-qs-up':i.flag=='up'},{'p-qs-down':i.flag=='down'}]">
          <p class="p-name">{{i.title}}</p>
          <p class="p-price"><span class="p-price-s">{{i.number}}</span></p>
        <p class="p-qs"  v-if="i.flag=='normal'">
            <span>--</span>  <span>--</span>
          </p>
         <p class="p-qs"  v-else>
            <span>{{i.gain}}</span>  <span>{{i.per}}</span>
          </p>
          
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      autoTime: 6000,
      dataBannerLeft: [],
      dataBannerRight: []
    };
  },
  computed: {
    mymenu() {
      return this.$store.state.mymenu;
    },
    bannerway() {
      return this.$store.state.indexData;
    }
  },
  watch: {
    bannerway() {
      this.getBanner();
    },
    mymenu(ews, old) {
      this.getBanner();
    },
    $route(to, from) {
      this.getBanner();
    }
  },
  mounted() {
    this.getBanner();
  },
  methods: {
    getBanner() {
      let channel = this.$route.query.channel;
      let mymenu = this.$store.state.mymenu;
      let banner = {};
      if (!channel) {
        if (mymenu.tcl == "1") {
          banner = this.$store.state.indexData.datatcl;
        } else if (mymenu.dc == "1") {
          banner = this.$store.state.indexData.datadc;
        } else if (mymenu.dlg == "1") {
          banner = this.$store.state.indexData.datadlg;
        }
      } else {
        if (channel == "tcl") {
          banner = this.$store.state.indexData.datatcl;
        } else if (channel == "dc") {
          banner = this.$store.state.indexData.datadc;
        } else if (channel == "dlg") {
          banner = this.$store.state.indexData.datadlg;
        }
      }
     if (banner ) {
       this.dataBannerRight = banner.right;
      this.dataBannerLeft = banner.left;
     }
      
     
    },
    bannerHref() {
      let mymenu = this.$store.state.mymenu;
      let temp = {};
      if (mymenu.tcl == "1") {
        temp.channel = "tcl";
        temp.text='Carbon'
      } else if (mymenu.dc == "1") {
        temp.channel = "dc";
          temp.text='Battery'
      } else if (mymenu.dlg == "1") {
        temp.channel = "dlg";
          temp.text='EAF'
      }
      let obj = {
        select: {
          text: temp.text,
          id: temp.channel
        },
        channel: temp.channel,
        kname: "",
        specs: ""
      };
      this.$store.dispatch("acpricepartObj", obj);
      this.$router.push({ path: "pricepart" });
    }
  },
 
};
</script>

<style scoped lang="less">
.hqBox {
  width: 100%;
  background: #ffffff;
  display: flex;
  padding-top: 0.2rem;
  .hqBox-box {
    flex: 1;
    height: 1.6rem;
    .hqBox-box-p {
      color: rgba(43, 43, 43, 1);
      height: 100%;
      text-align: center;
    }
    .p-name {
      padding-top: 0.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.2rem;
      color: rgba(39, 41, 55, 1);
    }
    .p-price {
      margin-bottom: 0.2rem;
      font-size: 0.3rem;
      font-weight: bolder;
      color: inherit;
    }
    .p-qs {
      background: rgba(31, 135, 229, 0.14);
      border-radius: 0.08rem;
      position: relative;
      height: 0.4rem;
      width: 1.8rem;
      line-height: 0.4rem;
      font-size: 0.2rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: rgba(0, 132, 248, 1);
      span {
        transform: scale(0.8);
      }
    }
    .p-qs-down {
      color: rgba(55, 161, 12, 1);
      .p-price-s{
        position: relative;
        padding-left: .35rem;
        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-width: 0.12rem;
          border-style: solid;
          border-color: rgba(55, 161, 12, 1) transparent transparent transparent;
          position: absolute;
          top: 0.13rem;
          left: 0rem;
        }
      }
     
    }
    .p-qs-up {
      color: rgba(216, 45, 39, 1);
     .p-price-s{
         position: relative;
        padding-left: .35rem;
        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-width: 0.12rem;
          border-style: solid;
          border-color: transparent transparent rgba(216, 45, 39, 1) transparent;
          position: absolute;
          top: -0.02rem;
          left: 0rem;
        }
      }
     
    }
  }

  .box2 {
 
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
